<template>
  <div>
    <div class="card-header" >
      <Cascader :data="categories" v-model="categoriesSelect" placeholder="请选择类目..." style="width: 200px;display: inline-block"></Cascader>
      <Select v-model="brandSelect" clearable placeholder="请选择品牌..." style="width:200px;display: inline-block" >
        <Option v-for="item in brandList" :value="item.id" :key="item.id">{{ item.name }}</Option>
      </Select>
      <Select v-model="enableSelect" clearable placeholder="请选择上下架..." style="width:200px;display: inline-block" >
        <Option value="true">在售</Option>
        <Option value="false">下架</Option>
      </Select>
      <Button type="primary" icon="ios-search" @click="loadData">搜索</Button>
    </div>
    <div class="card-body card-padding" >
      <Table :loading="loading" :columns="columns" :data="data"></Table>
    </div>
    <div class="card-footer  card-padding">
      <div class="page pull-right">
        <Page :current.sync="page" :total="totalElements" show-elevator show-sizer  show-total @on-page-size-change="changePageSize"></Page>
      </div>
    </div>
  </div>
</template>

<script>
import {findAll, changeEnable} from '../../api/product/productApi'
import getTree from '../../api/product/categoriesApi'
import listBrands from '../../api/product/brandsApi'

import expandRow from '../../components/ProductTableExpand.vue'
export default {
  components: { expandRow },
  data () {
    return {
      loading: false,
      categories: [],
      categoriesSelect: [],
      brandList: [],
      brandSelect: undefined,
      enableSelect: undefined,
      columns: [
        {
          type: 'expand',
          width: 50,
          render: (h, params) => {
            return h(expandRow, {
              props: {
                row: params.row
              }
            })
          }
        },
        {
          title: '序号',
          type: 'index'
        },
        {
          title: '类别',
          key: 'categoryName'
        },
        {
          title: '品牌',
          key: 'brandName'
        },
        {
          title: '关键属性',
          key: 'majorProperties',
          render: (h, params) => {
            let majorProperties = params.row.majorProperties
            let info = ''
            majorProperties.forEach((p) => {
              info += (' ' + p.name + ' : ' + p.value + ' ,')
            })
            info = info.substr(0, info.length - 1)
            return h('span', info)
          }
        },
        {
          title: '状态',
          key: 'status',
          width: 100,
          render: (h, params) => {
            let enable = params.row.enable
            return h('span', {
              'class': {
                label: true,
                'label-success': enable,
                'label-danger': !enable
              }
            }, enable ? '在售' : '下架')
          }
        },
        {
          title: '上架时间',
          key: 'createTime'
        },
        {
          title: '修订时间',
          key: 'modifyTime'
        },
        {
          title: '操作',
          key: 'action',
          fixed: 'right',
          width: 120,
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'text',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.modifyAction(params.row.id)
                  }
                }
              }, '修改'),
              h('Button', {
                props: {
                  type: 'text',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.changeEnableAction(params.row.id, !params.row.enable)
                  }
                }
              }, params.row.enable ? '下架' : '上架')
            ])
          }
        }
      ],
      data: [
        {
          id: 1,
          categoryId: 6,
          brandId: 6,
          enable: true,
          majorProperties: [
            {
              name: '型号',
              value: '华为p9'
            }
          ],
          productAttributes: [
            {
              groupName: 'string',
              name: 'string',
              value: [
                'string'
              ]
            }
          ],
          specifications: [
            {
              name: 'string',
              value: [
                'string'
              ]
            }
          ],
          createTime: '2018-03-08 05:42:20',
          modifyTime: '2018-03-08 05:48:42'
        }
      ],
      page: 1,
      totalElements: 0,
      pageSize: 10
    }
  },
  mounted () {
    this.search()
    getTree(d => {
      this.categories = d
    })
    listBrands(d => {
      this.brandList = d
    })
  },
  methods: {
    search () {
      this.page = 1
      this.loadData()
    },
    loadData () {
      this.loading = true
      let params = {
        categoryId: this.categoriesSelect[this.categoriesSelect.length - 1],
        brandId: this.brandSelect,
        enable: this.enableSelect,
        page: this.page - 1,
        size: this.pageSize
      }
      findAll(params, data => {
        this.loading = false
        this.data = data.content
        this.totalElements = data.totalElements
      })
    },
    changeEnableAction (id, enable) {
      changeEnable(id, enable, _ => { this.$Message.success('修改上下架成功'); this.loadData() }, _ => this.$Message.error('修改上下架失败'))
    },
    modifyAction (id) {
      this.$router.push({ path: '/product/?productId=' + id })
    },
    changePageSize (pageSize) {
      this.pageSize = pageSize
      this.loadData()
    }
  },
  watch: {
    page () {
      this.loadData()
    }
  }
}
</script>

<style lang="less" scoped>

</style>
